<template>
    <view>
        <up-navbar placeholder title="成交套餐" :autoBack="true" bgColor="rgba(255,255,255,0)"></up-navbar>
        <image src="@/static/images/img/sgbg.png" class="w-[100%] h-[40vh] z-[-1] absolute top-0"></image>
        <view class="pt-[72rpx] flex flex-col items-center">
            <image class="w-[686rpx] h-[404rpx]" src="@/static/images/img/tc.png"></image>
        </view>
        
        <!-- 添加线索类型切换 -->
        <view class="px-[32rpx] mt-[20rpx]">
            <view class="flex justify-center mb-[30rpx]">
                <view class="tab-container">
                    <view 
                        class="tab-item" 
                        :class="{ 'tab-active': clueType === 0 }" 
                        @click="switchClueType(0)"
                    >
                        超级线索
                    </view>
                    <view 
                        class="tab-item" 
                        :class="{ 'tab-active': clueType === 1 }" 
                        @click="switchClueType(1)"
                    >
                        共享线索
                    </view>
                </view>
            </view>
        </view>
        
        <view class="px-[32rpx]">
            <view class="text-[32rpx] text-[#000000] font-[500]">选择套餐</view>
            <view class="mt-[20rpx] flex">
                <view 
                    v-for="(item, index) in filteredPackageList" 
                    :key="index"
                    class="package-item ml-[23rpx]"
                    :class="{ 'package-item-active': selectedPackage == index }"
                    @click="selectPackage(index)"
                >
                    <view class="package-title">{{ item.packageName }}</view>
                    <view class="package-price">¥ {{ item.amount }}</view>
                    <view class="package-times">{{ item.number }}次</view>
                </view>
            </view>
        </view>
        <view class="px-[32rpx] mt-[364rpx] h-[88rpx]">
            <up-button @click="zf" text="前往支付" 
                :customStyle="{
                    color: '#FFEFB8',
                    padding: '12rpx 74rpx',
                    fontWeight: '500',
                    borderRadius: '16rpx',
                    fontSize: '28rpx',
                    lineHeight: '40rpx',
                    background: 'linear-gradient( 98deg, #454545 0%, #000000 100%)'
                }"></up-button>
        </view>
    </view>
    <popup-login v-model="userStore.showLoginPopup" />
</template>
<script setup>
import { ref, computed } from 'vue';
import { getPayList, createOrder } from '@/api/pay.js'
import {
	onLoad, onShow
} from '@dcloudio/uni-app'
import useUserStore from '@/store/modules/user';

const userStore = useUserStore();
const packageList = ref([]);
const clueType = ref(0); // 默认显示超级线索(clueType=0)

// 根据 clueType 过滤套餐列表
const filteredPackageList = computed(() => {
    return packageList.value.filter(item => item && item.clueType === clueType.value);
});

// 获取套餐列表
const getlist = () => {
    getPayList().then(res => {
        if (res.code == 200) {
            packageList.value = res.rows;
        } else {
            uni.$u.toast(res?.msg);
        }
    })
}

// 切换线索类型
const switchClueType = (type) => {
    clueType.value = type;
    selectedPackage.value = 0; // 重置选中的套餐
}

// 当前选中的套餐索引
const selectedPackage = ref(0);

// 选择套餐方法
const selectPackage = (index) => {
    selectedPackage.value = index;
};

const zf = () => {
    // 获取当前选中的套餐
    if (!filteredPackageList.value || filteredPackageList.value.length == 0 || !filteredPackageList.value[selectedPackage.value]) {
        uni.$u.toast('请选择有效的套餐');
        return;
    }
    
    const selectedPkg = filteredPackageList.value[selectedPackage.value];
    
    // 创建订单数据
    const orderData = {
        cluePackageId: selectedPkg.id // 传递当前选中套餐id
    };
    
    // 调用创建订单接口
    createOrder(orderData).then(res => {
        if (res.code == 200) {
            // 订单创建成功，跳转到支付页面
            uni.navigateTo({
                url: `/pages_qc/pay/pay?orderNo=${res.data.outTradeNo}&amount=${selectedPkg.amount}`
            });
        } else {
            uni.$u.toast(res?.msg || '创建订单失败');
        }
    }).catch(err => {
        console.error('创建订单失败', err);
        uni.$u.toast('创建订单失败，请稍后重试');
    });
};

onLoad(() => {
	getlist();
})
</script>
<style scoped lang="scss">
.tab-container {
    display: flex;
    background-color: #F5F5F5;
    border-radius: 100rpx;
    overflow: hidden;
    width: 400rpx;
}

.tab-item {
    flex: 1;
    text-align: center;
    padding: 16rpx 0;
    font-size: 28rpx;
    color: #666;
    transition: all 0.3s;
}

.tab-active {
    background-color: #D4AF37;
    color: #FFFFFF;
    font-weight: 500;
}

.package-item {
    width: 160rpx;
    height: 160rpx;
    border-radius: 8rpx;
    background-color: #fff;
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 20rpx;
    position: relative;
    border: 2rpx solid transparent;
    transition: all 0.3s;
}

.package-item-active {
    border: 2rpx solid #D4AF37; /* 金色边框 */
}

.package-title {
    font-size: 28rpx;
    font-weight: 500;
    color: #333;
    margin-bottom: 8rpx;
}

.package-price {
    font-size: 32rpx;
    font-weight: bold;
    color: #D4AF37; /* 金色价格 */
}

.package-times {
    font-size: 24rpx;
    color: #999;
    margin-top: 8rpx;
}
</style>